<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
	<title>Demo 5: Drag and drop</title>
	<link rel="stylesheet" href="css/demos.css" media="screen" type="text/css">
	<style type="text/css">
	/* CSS for the demo. CSS needed for the scripts are loaded dynamically by the scripts */
	#mainContainer{
		width:600px;
		margin:0 auto;
		margin-top:10px;
		border:1px solid #000;
		padding:2px;
	}
	
	#articles{
		width:150px;
		float:left;
		border:1px solid #000;
		background-color:#E2EBED;
		padding:3px;
		height:470px;
		
	}
	#articleBody{
		width:350px;
		float:right;
		margin:2px;
		height:470px;
		border:1px solid #000;
		background-color:#E2EBED;
		padding:2px;
		
	}	
	.dropBox{
		width:190px;
		border:1px solid #000;
		background-color:#E2EBED;
		height:400px;
		margin-bottom:10px;
		padding:3px;
		overflow:auto;
	}
	.dragableBox{
		width:80px;
		height:18px;
		border:1px solid #000;
		background-color:#FFF;		
		margin-bottom:5px;
		padding:6px;
		font-weight:bold;
		text-align:center;
		cursor:move;
	}			
	a{
		color:#F00;
	}
		
	.clear{
		clear:both;
	}
	</style>	
	<script type="text/javascript" src="../js/ajax.js"></script>
	<script type="text/javascript" src="../js/dhtml-suite-for-applications.js"></script>
</head>
<body>	
	<div id="header">
		<img src="../images/logo.png">
	</div>
	<div id="mainContainer">
		<h2>Drag and drop - demo 5</h2>
		<div id="articles">
			<p><b>Drag an article</b></p>
			<div id="listOfArticles">
				<div class="dragableBox" id="box1">Article 1</div>
				<div class="dragableBox" id="box2">Article 2</div>
				<div class="dragableBox" id="box3">Article 3</div>
				<div class="dragableBox" id="box4">Article 4</div>
				<div class="dragableBox" id="box5">About</div>
				<div class="dragableBox" id="box6">Norway</div>
			</div>
		</div>
		<div id="articleBody">
			<div id="articleContent">Drag some articles over here.</div>
		
		</div>
		<div class="clear"></div>
	</div>

<div id="debug"></div>
<script type="text/javascript">

// Custom drop action for the country boxes

function dropItems(idOfDraggedItem,targetId,x,y)
{
	var targetObj = document.getElementById(targetId);	// Creating reference to target obj
	var sourceObj = document.getElementById(idOfDraggedItem);	// Creating reference to source, i.e. dragged object
	
	var articleId = sourceObj.id.replace(/[^0-9]/gi,'');
	
	dynConObj.loadContent('articleContent','includes/article' + articleId + '.html');
		
}



var dragDropObj = new DHTMLSuite.dragDrop();	// Creating drag and drop object

// Assigning drag events to the capitals
dragDropObj.addSource('box1',true);	// Make <div id="box1"> dragable. slide item back into original position after drop
dragDropObj.addSource('box2',true);	// Make <div id="box2"> dragable. slide item back into original position after drop
dragDropObj.addSource('box3',true);	// Make <div id="box3"> dragable. slide item back into original position after drop
dragDropObj.addSource('box4',true);	// Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box5',true);	// Make <div id="box5"> dragable. slide item back into original position after drop
dragDropObj.addSource('box6',true);	// Make <div id="box6"> dragable. slide item back into original position after drop



// Assigning drop events on the countries
dragDropObj.addTarget('articleBody','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop


dragDropObj.init();	// Initizlizing drag and drop object

dynConObj = new DHTMLSuite.dynamicContent();	// Creating object of class DHTMLSuite_dynamicContent
dynConObj.setWaitMessage(false);

</script>



</body>
</html>